<template>
  <view>
    <nav-bar title="添加训练计划"></nav-bar>
    <view class="plan-form">
      <view class="form-scroll" :style="{ height: formHeight }">
        <view class="form-box">
          <you-form
            ref="form"
            :formTitle="'患者：' + patientName"
            :formConfig="assessConfig"
            v-model="assessData"
          ></you-form>
          <you-form
            ref="form"
            formTitle="训练计划"
            :formConfig="planConfig"
            v-model="planData"
          >
            <template slot="video">
              <view class="video-btn" @click="clickChooseVideo">
                {{ chooseVideoList && chooseVideoList.length ? '继续选择' : '选择课程' }}
              </view>
            </template>
            <template slot="videoList">
              <scroll-view
                scroll-y
                style="height: 600rpx"
                v-if="chooseVideoList && chooseVideoList.length"
              >
                <view
                  v-for="(item, index) in chooseVideoList" 
                  :key="index"
                >
                  <view class="content-box">
                    <view class="left-box" @click.stop>
                      <video
                        :id="'videoId'+ index"
                        style="width: 100%; height: 100%"
                        class="video"
                        :src="item.videoUrl"
                      ></video>    
                    </view>
                    <view class="right-box" >
                      <view class="name">{{ item.title }}</view>
                      <view class="choose-icon" @click="clickDeleteVideo(item)">
                        <uni-icons
                          type="close"
                          color="#115BAA"
                        ></uni-icons>
                        删除
                      </view>
                    </view>
                  </view>
                </view>
              </scroll-view>
            </template>
          </you-form>
        </view>
      </view>
    </view>
    <you-bottom-btn
      :btnConfig="bottomBtnConfig"
      @clickSubmit="clickSubmit"
      @clickCancel="clickCancel"
    ></you-bottom-btn>
  </view>
</template>

<script>
  import { PLAN_FORM, ASSESS_CONFIG } from '../formConfig/planConfig'
  import api_physician from '@/api/physician.js'
  export default {
    name: 'AddPlan',
    data() {
      return {
        formHeight: '',
        planConfig: [],
        planData: {},
        bottomBtnConfig: [
          { text: '取消', class: 'cancel', funcName: 'clickCancel' },
          { text: '确认提交', class: 'confirm', funcName: 'clickSubmit' }
        ],
        medicineId: null,
        patientId: null,
        popupVisible: false,
        chooseVideoList: [],
        chooseIds: [],
        medicineId: null,
        patientName: '',
        planId: null,
        assessConfig: [],
        assessData: {},
      }
    },
    onLoad(options) {
      this.formHeight = this.$store.getters.heightData.noTabMainHeight - 85 + 'px'
      this.planConfig = uni.$u.deepClone(PLAN_FORM)
      if (options.medicineId) {
        this.medicineId = options.medicineId
      }
      if (options.patientId) {
        this.patientId = options.patientId
      }
      if (options.videoList) {
        this.chooseVideoList = uni.$u.deepClone(JSON.parse(decodeURIComponent(options.videoList)))
      }
      if (uni.getStorageSync('planData')) {
        this.planData = { ...uni.getStorageSync('planData') }
      }
      if (uni.getStorageSync('assessData')) {
        this.assessData = { ...uni.getStorageSync('assessData') }
      }
      this.assessConfig = uni.$u.deepClone(ASSESS_CONFIG)
      this.patientName = options.patientName
    },
    onUnload() {
      uni.setStorageSync('planData', null)
      uni.setStorageSync('assessData', null)
    },
    methods: {
      clickChooseVideo() {
        let videoList = []
        if (this.chooseVideoList && this.chooseVideoList.length) {
          videoList = encodeURIComponent(JSON.stringify(this.chooseVideoList))
        }
        uni.setStorageSync('planData', this.planData)
        uni.setStorageSync('assessData', this.assessData)
        uni.navigateTo({
          url: `/subPages/physicianTrainPlan/plan/chooseVideo?chooseVideoList=${videoList}&medicineId=${this.medicineId}&patientId=${this.patientId}&patientName=${this.patientName}`
        })
      },
      clickVideoItem(item) {
        if (this.chooseIds.includes(item.id)) {
          this.chooseIds = this.chooseIds.filter(cItem => cItem !== item.id)
          this.chooseVideoList = this.chooseVideoList.filter(cItem => cItem.id !== item.id)
        } else {
          this.chooseIds.push(item.id)
          this.chooseVideoList.push(item)
        }
      },
      clickDeleteVideo(item) {
        this.chooseVideoList = this.chooseVideoList.filter(cItem => cItem.id !== item.id)
      },
      clickCancel() {
        uni.redirectTo({
          url: `/subPages/physicianTrainPlan/patient/patientDetail?medicineId=${this.medicineId}`
        })
      },
      async clickSubmit() {
        const formCheck = await this.$refs.form.checkFormData()
        if (!formCheck) return uni.$u.toast('请将表单数据填写完整')
        if (!(this.chooseVideoList && this.chooseVideoList.length)) {
          return uni.$u.toast('请将选择课程课程')
        }
        const videoIds = this.chooseVideoList.map(item => item.id).join(',')
        const params = { 
          ...this.planData,
          videoIds,
          medicineId: this.medicineId,
          patientId: this.patientId,
          baEvaluationReport: {
            ...this.assessData,
            medicineId: this.medicineId
          }
        }
        api_physician.addPlan(params).then(res => {
          if (res.code !== 200) return
          uni.showToast({
            title: '计划新增成功！',
            icon: 'success',
            mask: true
          })
          uni.redirectTo({
            url: `/subPages/physicianTrainPlan/patient/patientDetail?medicineId=${this.medicineId}`
          })
        })
      }
    }
  }
</script>
<style lang="scss">
  .plan-form {
    padding-top: 15px;
  }
  .form-scroll {
    overflow-y: scroll;
  }
  .form-box {
    margin: 0 30rpx;
    border-radius: 16rpx;
    background-color: #FFF;
    overflow: hidden;
  }
  .video-btn {
    height: 60rpx;
    border-radius: 30rpx;
    padding: 0 20rpx;
    line-height: 60rpx;
    color: #FFF;
    background-color: #115BAA;
  }
  .video-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 20rpx 30rpx;
    overflow-y: scroll;
    max-height: 600rpx;
    .video-item {
      width: 31%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 220rpx;
      margin: 14rpx 1%;
      .video {
        width: 100%;
        height: 90%;
      }
    }
  }
  .content-box {
    display: flex;
    padding: 24rpx 0;
    margin: 20rpx 0;
    border: 4rpx solid #FFF;
    border-radius: 16rpx;
    background-color: #FFF;
    .left-box {
      position: relative;
      width: 288rpx;
      height: 192rpx;
      margin-right: 20rpx;
      border-radius: 16rpx;
      overflow: hidden;
      .prism-big-play-btn {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 48%;
        width: 60rpx;
        height: 60rpx;
        background-size: contain;
        cursor: pointer;
        @keyframes warn {
          0% {
            transform: scale(0.5);
            opacity: 1;
          }

          30% {
            opacity: 1;
          }

          100% {
            transform: scale(1.4);
            opacity: 0;
          }
        }
      }
      .status-box {
        position: absolute;
        left: 0;
        top: 0;
        height: 40rpx;
        padding: 0 14rpx;
        border-radius: 16rpx 0 16rpx 0;
        line-height: 40rpx;
        font-size: 20rpx;
        color: #FFF;
      }
      .member-box {
        background: linear-gradient(146.01deg, #FF4E08 0%, #FF974D 100%);
      }
    }
    .right-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 16rpx 0;
      .name {
        font-size: 32rpx;
        font-weight: 500;
      }
      .choose-icon {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #115BAA;
      }
    }
  }
</style>
